'use client'

import { useState, useEffect } from 'react'
import { Input, Select, Space, Button } from 'antd'
import { SearchOutlined, ClearOutlined, GlobalOutlined, DownloadOutlined, AppstoreOutlined } from '@ant-design/icons'

const { Search } = Input

export default function SearchBar({
    onSearch,
    onFilter,
    searchTerm = '',
    filterType = 'all',
    placeholder = '搜索产品名称或描述...'
}) {
    const [localSearchTerm, setLocalSearchTerm] = useState(searchTerm)
    const [localFilterType, setLocalFilterType] = useState(filterType)

    // 产品类型选项
    const filterOptions = [
        {
            value: 'all',
            label: (
                <Space>
                    <AppstoreOutlined />
                    全部产品
                </Space>
            )
        },
        {
            value: 'website',
            label: (
                <Space>
                    <GlobalOutlined />
                    网站
                </Space>
            )
        },
        {
            value: 'app',
            label: (
                <Space>
                    <DownloadOutlined />
                    应用
                </Space>
            )
        }
    ]

    // 实时搜索处理
    useEffect(() => {
        const timeoutId = setTimeout(() => {
            if (onSearch) {
                onSearch(localSearchTerm)
            }
        }, 300) // 300ms 防抖

        return () => clearTimeout(timeoutId)
    }, [localSearchTerm, onSearch])

    // 搜索输入处理
    const handleSearchChange = (e) => {
        setLocalSearchTerm(e.target.value)
    }

    // 搜索提交处理
    const handleSearchSubmit = (value) => {
        setLocalSearchTerm(value)
        if (onSearch) {
            onSearch(value)
        }
    }

    // 筛选器变化处理
    const handleFilterChange = (value) => {
        setLocalFilterType(value)
        if (onFilter) {
            onFilter(value)
        }
    }

    // 清除搜索
    const handleClear = () => {
        setLocalSearchTerm('')
        setLocalFilterType('all')
        if (onSearch) {
            onSearch('')
        }
        if (onFilter) {
            onFilter('all')
        }
    }

    return (
        <div className="bg-white p-4 rounded-lg shadow-sm border border-gray-200 mb-6">
            <div className="flex flex-col sm:flex-row gap-4 items-stretch sm:items-center">
                {/* 搜索输入框 */}
                <div className="flex-1">
                    <Search
                        placeholder={placeholder}
                        value={localSearchTerm}
                        onChange={handleSearchChange}
                        onSearch={handleSearchSubmit}
                        enterButton={
                            <Button type="primary" icon={<SearchOutlined />}>
                                搜索
                            </Button>
                        }
                        size="large"
                        allowClear
                    />
                </div>

                {/* 产品类型筛选 */}
                <div className="sm:w-48">
                    <Select
                        value={localFilterType}
                        onChange={handleFilterChange}
                        options={filterOptions}
                        size="large"
                        className="w-full"
                        placeholder="选择产品类型"
                    />
                </div>

                {/* 清除按钮 */}
                {(localSearchTerm || localFilterType !== 'all') && (
                    <Button
                        icon={<ClearOutlined />}
                        onClick={handleClear}
                        size="large"
                        className="sm:w-auto"
                    >
                        清除
                    </Button>
                )}
            </div>

            {/* 搜索状态显示 */}
            {(localSearchTerm || localFilterType !== 'all') && (
                <div className="mt-3 pt-3 border-t border-gray-100">
                    <div className="flex flex-wrap gap-2 text-sm text-gray-600">
                        {localSearchTerm && (
                            <span className="bg-blue-50 text-blue-700 px-2 py-1 rounded">
                                搜索: &quot;{localSearchTerm}&quot;
                            </span>
                        )}
                        {localFilterType !== 'all' && (
                            <span className="bg-green-50 text-green-700 px-2 py-1 rounded">
                                类型: {filterOptions.find(opt => opt.value === localFilterType)?.label.props.children[1]}
                            </span>
                        )}
                    </div>
                </div>
            )}
        </div>
    )
}